<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Parameters</title>
    <#include "/include/resource.html"/>
    <script type="application/javascript">
        function confirmToCancel(id){
            bootbox.confirm("Delete？", function (result) {
                if (result) {
                    $.ajax({
                        type: "DELETE",
                        url: "${base}/admin/template/delete?id="+id,
                        dataType: "json",
                        success: function(data){
                            console.log(data);
                            if(typeof(data)!='undefined'){
                                document.location.reload();
                            }
                        },
                        error:function(){

                        }
                    });
                }
            });
        }
    </script>
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
    <#include "/include/header.html"/>
    <#include "/include/main-sidebar.html"/>
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>
                
                <small> Parameters</small>
            </h1>
            <ol class="breadcrumb">
                <li><i class="fa fa-dashboard"></i> </li>
                <li class="active">Parameters</li>
            </ol>
        </section>

        <!-- Main content -->
        <section class="content">
            <div class="row">
                <div class="col-md-12">
                    <div class="box">
                        <div class="box-header with-border">
                            <h3 class="box-title">Templates</h3>
                        </div>
                        <!-- /.box-header -->
                        <div class="box-body">
                            <form id="tableForm" method="post" class="form-horizontal" action="${base}/admin/parameters/list">
                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-md-3">
                                            <label for="clientName" class="col-md-5 control-label">Client Name：</label>
                                            <div class="col-md-7" style="padding: 0px">
                                                <input type="text" class="form-control" value="${(queryParam.clientName)!}" name="clientName" id="clientName">
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <label for="photoStyle" class="col-md-5 control-label">Photo style：</label>
                                            <div class="col-md-7" style="padding: 0px">
                                                <select class="form-control select2" style="width: 100%;" id="photoStyle" name="photoStyle">
                                                    <option value="">-----please select-----</option>
                                                    <#list photoStyles as obj>
                                                        <option <#if (obj.value)! == (queryParam.photoStyle)!> selected="selected"</#if> value="${(obj.value)!}">${(obj.value)!}</option>
                                                    </#list>
                                                </select>
                                            </div>
                                         </div>

                                        <div class="col-md-3">
                                            <label for="sceneStyle" class="col-md-5 control-label">Scene Style：</label>
                                            <div class="col-md-7" style="padding: 0px">
                                                <select class="form-control select2" style="width: 100%;" id="sceneStyle" name="sceneStyle">
                                                    <option value="">-----please select-----</option>
                                                    <#list sceneStyles as obj>
                                                        <option <#if (obj.value)! == (queryParam.sceneStyle)!> selected="selected"</#if> value="${(obj.value)!}">${(obj.value)!}</option>
                                                    </#list>
                                                </select>
                                            </div>
                                        </div>

                                        <div class="col-md-3">
                                            <label for="lightingStyle" class="col-md-5 control-label">Lighting Style：</label>
                                            <div class="col-md-7" style="padding: 0px">
                                                <select class="form-control select2" style="width: 90%" id="lightingStyle" name="lightingStyle">
                                                    <option value="">-----please select-----</option>
                                                    <#list lightingStyles as obj>
                                                        <option <#if (obj.value)! == (queryParam.lightingStyle)!> selected="selected"</#if> value="${(obj.value)!}">${(obj.value)!}</option>
                                                    </#list>
                                                </select>
                                            </div>
                                        </div>

                                    </div>
                                    <div  class="row" style="margin-top: 5px;">
                                        <div class="col-md-3">
                                            <label for="lightingStyle" class="col-md-5 control-label">Created Date：</label>
                                            <div class="col-md-7" style="padding: 0px">
                                                <input type="text" class="form-control datepicker" style="width: 48%;display: inline;" name="beginDate" value="${(queryParam.beginDate)!''}" >
                                                -<input type="text" class="form-control  datepicker"  style="width: 48%;display: inline;" name="endDate" value="${(queryParam.endDate)!''}" >
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <label for="clientName" class="col-md-5 control-label">Lighting Count：</label>
                                            <div class="col-md-7" style="padding: 0px">
                                                <select class="form-control select2" style="width: 100%" id="lightCount" name="lightCount">
                                                    <option value="">-----please select-----</option>
                                                    <option value="1" <#if '1' == (queryParam.lightCount)!> selected="selected"</#if>>1-5</option>
                                                    <option value="2" <#if '2' == (queryParam.lightCount)!> selected="selected"</#if>>6-10</option>
                                                    <option value="3" <#if '3' == (queryParam.lightCount)!> selected="selected"</#if>>> 10</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <label for="clientName" class="col-md-5 control-label">Props Count：</label>
                                            <div class="col-md-7" style="padding: 0px">
                                                <select class="form-control select2" style="width: 100%" id="propsCount" name="propsCount">
                                                    <option value="">-----please select-----</option>
                                                    <option value="2" <#if '2' == (queryParam.propsCount)!> selected="selected"</#if>>YES</option>
                                                    <option value="1" <#if '1' == (queryParam.propsCount)!> selected="selected"</#if>>No</option>
                                                 </select>
                                            </div>
                                        </div>


                                        <div class="col-md-1">
                                            <button type="button" onclick="HF.query('tableForm');" class="btn btn-primary">Query</button>
                                        </div>
                                    </div>
                            </div>
                            <table class="table table-bordered">
                                <tr>
                                    <th>No</th>
                                    <th>Name</th>
                                    <th>Photo Type</th>
                                    <th>Client name</th>
                                    <th>Product category</th>
                                    <th>Photo style</th>
                                    <th>Scene Style</th>
                                    <th>Lighting Style</th>
                                    <th>CreateDate</th>
                                    <th>ModifyDate</th>
                                    <th>Status</th>
                                    <th>Valid</th>
                                    <th style="width: 80px;">Action List</th>
                                </tr>
                               <#if list??&&list?size gt 0>
                               <#list list as t>
                                <tr>
                                    <td>${t_index+1}</td>
                                    <td>${(t.name)!}</td>
                                    <td>${(t.photoType)!}</td>
                                    <td>${(t.clientName)!}</td>
                                    <td>${(t.productCategory)!}</td>
                                    <td>${(t.photoStyle)!}</td>
                                    <td>${(t.sceneStyle)!}</td>
                                    <td>${(t.lightingStyle)!}</td>
                                    <td>${(t.createDate?string('MM/dd/yyyy'))!}</td>
                                    <td>${(t.modifyDate?string('MM/dd/yyyy'))!}</td>
                                    <td>${(t.status)!}</td>
                                    <td>${(t.valid)?string('Valid','Invalid')}</td>
                                <td style="width: 80px;">
                                    <a  target="_blank" href="${base}/svg/view?id=${t.id?c}" >Canvas</a>
                                    </td>
                                    </tr>
                                    </#list>
                                    <#else>
                                        <td colspan="11" align="center">No Records!</td>

                                </#if>
                            </table>
                        </div>
                        <!-- /.box-body -->
                        <@p.pager pageNo=pageNo pageSize=pageSize totalCount=totalCount />
                        </form>
                    </div>
                    <!-- /.box -->
                </div>
            </div>
        </section>
        <!-- /.content -->
    </div>
    <!-- 弹出窗口 -->
    <#include "/include/modal.html"/>
    <#include "/include/footer.html"/>

    <!-- /.content-wrapper -->

    <div class="control-sidebar-bg"></div>
</div>
<#include "/include/js_footer.html"/>

<script type="application/javascript">
    $(function () {

            $.fn.datepicker.defaults.format = "mm/dd/yyyy";
            $('.datepicker').datepicker({
                autoclose: true
            })

    })
</script>
</body>

</html>
